<template>
  <div class="social">
       <ul class="social-list">
           <li class="social-item social-item--{{media.name}}"
               v-for="media in social">
               <a v-bind:class="['social-item--link']" href="{{media.url}}">
                  <i v-bind:class="['fa', media.icon, 'social-icon']"></i>
                </a>
            </li>
       </ul>
  </div>
</template>

<script>
  'use strict';
  import { pick } from 'ramda';

  import store from '../../store';
  import socialform from './form.vue';

  export default {
    data() {
      return {
        social: [{
          name: 'facebook', root: 'https://facebook.com', icon: 'fa-facebook'
        }, {
          name: 'twitter', root: 'https://twiter.com', icon: 'fa-twitter'
        }, {
          name: 'youtube', root: 'https://youtube.com/user', icon: 'fa-youtube'
        }],
        selected: this.$select('selected'),
      }
    },
    components: {
      'social-form': socialform,
    },
    created() {
      this.social = this.social.map(media =>
        Object.assign(media,
          { url: `${media.root}/${this.selected[media.name]}` }));
    },
  }
</script>
